<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

</body>
<script>
    // 上面这种写法跟传统的面向对象语言（比如 C++ 和 Java）差异很大，很容易让新学习这门语言的程序员感到困惑。

    // ES6 提供了更接近传统语言的写法，引入了 Class（类）这个概念，作为对象的模板。通过class关键字，可以定义类。

    // 基本上，ES6 的class可以看作只是一个语法糖，它的绝大部分功能，ES5 都可以做到，新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。

    // 类
    class Cat {
        // constructor 用于配置构造函数
        constructor(name, color) {
            this.name = name;
            this.color = color;
        }
        // 静态属性和方法   =>  构造函数自己的方法  
        static hello = "你好";
        static isCat(arg) {
            if (arg && arg.constructor === Cat) return true;
            return false;
        }


        // 拓展: 私有的属性和方法(新增)(只允许构造函数内自己访问)
        // #posX = null; // this.posX = null
        // #posY = null;

        // 公有的属性和方法 (动态属性和方法)
        // 注意:class中 直接定义的变量存储在实例化对象中
        // posX = null; // this.posX = null
        // posY = null;
        species = "猫";
        getPos() {
            document.onclick = (e) => {
                var e = e || window.event;
                this.posX = e.pageX;
                this.posY = e.pageY;
                console.log(this);
            }
        }

        // class中直接定义的方法  => 存储在原型对象中
        call() {
            console.log("喵喵");
        }
        skill() {
            console.log("捉老鼠");
        }
        say() {
            console.log(this.name, this.color);
        }
    }
    // 也可以等待class创建之后 在手动设置公有属性 
    // Cat.prototype.species = "猫";

    console.dir(Cat)
    var Tom = new Cat("Tom", "black");
    console.log(Tom);
    Tom.getPos();














    // 可以理解为
    /* Cat.prototype = {
        constructor: function Cat() { }
        species,
        call(){},
        skill(){},
        say(){}
    } */




























</script>

</html>